// components/navbar/navbar.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    activeIndex:{
      type:Number,
      value:0
    },
    tabs:{
      type:Array,
      value: ["选项一", "选项二", "选项三"]
    },
    sliderOffset: {
      type: Number,
      value: 0
    },
    sliderLeft: {
      type: Number,
      value: 0
    },
    contentes:{
      type:Array,
      value:[
        {
          title:"选项一"
        },
        {
          title:"选项二"
        },
        {
          title:"选项三"
        },
        {
          title:"选项四"
        },
      ]
    }
  },
  externalClasses: ['nav', 'navitem-class', 'navactive-class','navactivebot-class'], //组件接受的外部样式类
  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    tabClick:function(e){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
        activeIndex: e.currentTarget.id,
        sliderOffset: e.currentTarget.offsetLeft,
      })
    }
  },
  attached: function(){
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        // console.log(that.data.tabs.length);
        that.setData({
          tabWidth: res.windowWidth / that.data.tabs.length,//每一个子tab的宽度
          sliderLeft: (res.windowWidth / that.data.tabs.length)*that.data.activeIndex,//距离左侧手机边界的距离
        });
      }
    });
  },
})